<template>
  <div class="main">
    <Header :dataObj="selectData" />
    <div class="f content shrink0">
      <!--      <Tools />-->
      <Player
        v-if="selectData != null && videoType == '1'"
        :dataObj="selectData"
        :style="minWidth"
      />

      <div v-if="selectData != null && videoType == '0'" class="iframe-box">
        <iframe
          :src="selectData.video"
          width="100%"
          height="100%"
          frameborder="0"
          allowfullscreen
          allow="fullscreen"
        ></iframe>
      </div>

      <TeacherInfo
        :dataObj="data"
        @update-data="handleUpdate"
        @update-width="handleUpdateWidth"
        :tearcher="tearcher"
      />
    </div>
    <FAQ
      v-if="selectData != null && selectData.subsectionExamList.length > 0"
      :dataObj="selectData"
    />
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from "./components/header.vue";
import Tools from "./components/tools.vue";
import Player from "./components/player.vue";
import TeacherInfo from "./components/teacherInfo.vue";
import FAQ from "./components/FAQ.vue";
import {
  getCourseList,
  getCourceChapterDetails,
  getCourcePaperDetails,
  getTeachers,
} from "@/api/course/course";
import { useCounterStore } from "@/store/modules/counter.ts";
import { useRoute, useRouter } from "vue-router";

const route = useRouter();
const routeInfo = useRoute();
const minWidth = ref("min-width:calc(100% - 500px);");
const selectData = ref(null);
let videoType = ref("1");

const handleUpdateWidth = (newData) => {
  minWidth.value = "min-width:calc(100% - " + newData + "px);";
  // 更新父组件的数据
};

const handleUpdate = (newData) => {
  videoType.value = newData.uploadFlag ? newData.uploadFlag : "1";
  for (let item of data.value.courseChapterList) {
    for (let itemSon of item.courseSubsectionList) {
      if (itemSon.id === newData.id) {
        itemSon.active = "active";
        newData.pathName = item.chapterName + "===" + itemSon.subsectionName;
      } else {
        itemSon.active = "";
      }
    }
  }
  selectData.value = null;
  nextTick(() => {
    const subsectionExamList = newData.subsectionExamList;
    for (let item of subsectionExamList) {
      //处理判断题
      if (item.questionType == "3") {
        let rightStateTrue = JSON.parse(item.rightAnswers)[0] == "正确";
        let rightStateFalse = JSON.parse(item.rightAnswers)[0] == "错误";
        item.questionAnswers =
          '[{"content":"正确","optionLabel":"正确","rightState":' +
          rightStateTrue +
          '},{"content":"错误","optionLabel":"错误","rightState":' +
          rightStateFalse +
          "}]";
      }
      item.questionAnswersObj = JSON.parse(item.questionAnswers);
    }
    selectData.value = newData;
  });
  // 更新父组件的数据
};

const tearcher = ref({});
//接口数据
const data = ref([]);
//id
const id = ref(null);
id.value = routeInfo.query.id;
function loadData() {
  try {
    getCourceChapterDetails(id.value).then((res) => {
      data.value = res.data;
      getTeachers(data.value.courseTeacherId).then((res) => {
        tearcher.value = res.data;
      });

      //取第一个
      for (let item of data.value.courseChapterList) {
        let isBreak = 0;
        for (let itemSon of item.courseSubsectionList) {
          handleUpdate(itemSon);
          isBreak = 1;
          break;
        }
        if (isBreak === 1) {
          break;
        }
      }
    });
  } catch (error) {
    console.error("加载数据失败", error);
  }
}
onMounted(() => {
  loadData(); // 初始化加载数据
  //updateHeight();
  //window.addEventListener("resize", updateHeight);
});
</script>
<style lang="scss" scoped>
.content {
  min-width: 1154px;
  background: #1c1f21;
  height: calc(100vh - 150px);
}
.iframe-box {
  flex: 7;
  padding: 0 30px 50px;
  background: #191919;
}
</style>
